/**
* Created by icely on 2017/3/15.
*/
<template>
    <div class="switchCityContainer routerContent">
        <nav>切换城市</nav>
        <!--<x-header>{{ $route.name }}</x-header>-->
        <scroller :height="-26+'px'" lock-x ref="scroller">
            <div>
                <div class="searchBox">
                    <x-input v-model="currentCityName" :debounce="500" @on-change="currentCityNameChange"
                             placeholder="输入城市名或拼音查询" @on-blur="currentCityNameBlur" @on-focus="currentCityNameFocus">
                        <!--<img slot="label" style="padding-right:10px;display:block;" src="http://dn-placeholder.qbox.me/110x110/FF2D55/000" width="24" height="24">-->
                    </x-input>
                    <span class="searchIcon" v-if="hasSearchIcon"></span>
                    <p>当前城市： {{ changeCityObj.currentCityName | cityNameFilter6}}</p>
                </div>

                <div class="cityBox" @click="inputFocus">
                    <p class="title">定位城市</p>
                    <div class="cityButton"><span @click.stop="doSwitchCity('current')">{{ nearStoreObj.cityName | cityNameFilter6}}</span></div>
                </div>

                <div class="cityBox" @click="inputFocus" v-if="changeCityObj.recentCity[0].cityName">
                    <p class="title">最近访问城市</p>
                    <div class="cityButton" v-for="ritem in changeCityObj.recentCity"><span
                        @click.stop="doSwitchCity(ritem)">{{ ritem.cityName | cityNameFilter6}}</span>
                    </div>
                </div>

                <div class="cityBox" @click="inputFocus" v-if="changeCityObj.allCity[0].cityName">
                    <p class="title">所有城市</p>
                    <div class="cityButton" v-for="aitem in changeCityObj.allCity"><span
                        @click.stop="doSwitchCity(aitem)">{{ aitem.cityName | cityNameFilter6}}</span>
                    </div>
                </div>
            </div>
        </scroller>
        <alert v-model="switchCityShow"  @on-show="onSwitchCityShow" @on-hide="onSwitchCityHide">该城市暂无门店</alert>
    </div>
</template>

<script>
    import {Group, Cell, Confirm, Scroller, XInput ,Alert} from 'vux'

    import {changeCityService} from '../services/index'

    import {mapState, mapActions} from 'vuex'

    export default {
        components: {
            Group,
            Cell,
            Confirm,
            XInput,
            Scroller,
            Alert
        },
        mounted(){
        },
        created(){
//            this.$vux.loading.show({
//                text: 'Loading'
//            })
        },
        computed: {
            ...mapState({
                switchCityObj: state => state.switchCity.switchCityObj,
                nearStoreObj: state => state.switchCity.nearStoreObj,

            }),
        },
        activated(){
            if (this.cityName == '' || this.cityName != this.$route.query.cityName) {
                this.cityName = this.$route.query.cityName;
                this.changeCity(this.cityName);
            }
        },
        updated(){
            this.$refs.scroller.reset()
        },
        watch: {
            switchCity(val, oldval){

            }
        },
        data () {
            return {
                changeCityObj: {},
                currentCityName: '',
                switchCity: {},
                hasSearchIcon:true,
                switchCityShow:false
            }
        },
        methods: {
            ...mapActions([
                'updateSwitchCityObj'
            ]),
            changeCity(cityName, keyword){
                const obj = {
                    cityName: this.cityName,
                }
                if (keyword) {
                    obj.keyword = keyword;
                }
                changeCityService().save(obj).then((res) => {
                    const body = res.body;
                    if (body && body.code == 200) {
                        this.changeCityObj = body.data;
                        if(!this.changeCityObj.allCity[0].cityName){
                            this.onSwitchCityShow();
                        }else{
                            this.onSwitchCityHide();
                        }
                    }else{
                        this.onSwitchCityShow();
                    }
                });
            },
            currentCityNameChange(value){
                this.changeCity(this.cityName, value);
            },
            currentCityNameBlur(){
                if(this.currentCityName){
                    this.hasSearchIcon = false;
                }else{
                    this.hasSearchIcon = true;

                }
            },
            currentCityNameFocus(){
                this.hasSearchIcon = false;
            },
            doSwitchCity(item){
                let newCity = {};
                if(item == 'current'){
                    newCity.cityName = this.nearStoreObj.cityName;
                }else{
                    newCity = item;
                }
                this.updateSwitchCityObj(newCity);
                this.currentCityName = '';
                this.$router.back();
            },
            inputFocus(){
                const inputArr = window.document.getElementsByTagName('input');
                Array.from(inputArr).forEach((inputItem) => {
                    inputItem.blur();
                })
            },
            onSwitchCityShow(){
                this.switchCityShow = true;
            },
            onSwitchCityHide(){
                this.switchCityShow = false;
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less">

    .switchCityContainer {
        background: rgb(244, 244, 244);
         nav {
             font-size: .75rem;
             color: #fff;
             width: 100%;
             height: 2rem;
             line-height: 2rem;
             background: #fc8672;
             text-align: center;
         }
        * {
            font-size: 0.7rem;
        }
        .vux-header {
            background: rgb(253, 134, 114);
        }

        /* 顶部查询 */
        .searchBox {
            padding: 0.2rem 1rem;
            background: #FFFFFF;
            position: relative;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);

            p {
                font-size: 0.8rem;
                line-height: 200%;
                margin-top: 0.8rem;
            }
            input[type=text] {
                width: 100%;
                border-radius: 2rem;
                border: none;
                background: rgb(237, 237, 237);
                padding: 0.4rem 1rem;
                margin: 0.3rem auto;
                display: block;
                height: 1.5rem;
            }

            input[type=text]::-webkit-input-placeholder {
                text-align: center;
            }
            .searchIcon{
                background: url("../assets/img/icon-search.png") no-repeat;
                display: inline-block;
                position: absolute;
                width: 1rem;
                height: 1rem;
                background-size: 100% 100%;
                top: 1.3rem;
                left: 4.5rem;
            }
        }

        .cityBox {
            width: 100%;
            padding: 0.5rem 0.4rem;

            .title {
                line-height: 200%;
                color: rgba(0, 0, 0, 0.5);
                margin-left: 1.6%; /* 33.3% * 5% */
            }
            .cityButton {
                width: 33.3%;
                display: inline-block;

                span {
                    width: 90%;
                    display: block;
                    padding: 0.5rem 0rem;
                    margin: 0.2rem auto;
                    text-align: center;
                    background: #ffffff;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                    border-radius: 5px;
                }

                span:active {
                    /*background: red;*/
                }
            }
        }
    }

</style>

